{% extends 'base-static.html' %}
{% load staticfiles %}

{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/layui/css/modules/layer/skin/layer.css' %}">

{% endblock %}

{% block content %}
    <section class="content-header">
        <h1>
            我的账户
        </h1>
        <ol class="breadcrumb">
            <li><a href="{% url 'system:index' %}"><i class="fa fa-dashboard"></i>首页</a></li>
            <li class="active">我的账户</li>
        </ol>
    </section>

    <section class="content">
        <div class="box-body">
            <table id="dtbList" lay-filter="test" class="display" cellspacing="0" width="100%"></table>

            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="lookup">查看</a>
{#                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>#}
                <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="cancel">撤销审核</a>
            </script>
        </div>
    </section>

{% endblock %}


{% block js %}
    <script src="{% static 'plugins/layui/layui.js' %}"></script>
    <script src="{% static 'plugins/layui/css/modules/layer/layer.js' %}"></script>
    <script>
        layui.use(['table', 'form'], function () {
            var table = layui.table;
            var form = layui.form;
            form.render();

            // 表格渲染
            table.render({
                elem: '#dtbList',
                id: 'Reload',
                url: "{% url 'system:account-list' %}",
                method: 'get',
                height: 612,
                page: true,
                cols: [[
                    {field: 'id', title: '账户ID', width: 130, sort: true, fixed: 'left'}
                    , {field: 'name', title: '账号名称', fixed: 'left', width: 140, sort: true}
                    , {field: 'type', title: '账号类型', width: 150, sort: true}
                    , {field: 'apply_time', width: 160, title: '审核时间'}
                    , {field: 'expire_time', width: 160, title: '过期时间'}
                    , {
                        field: 'last_day', width: 130, title: '剩余使用天数',
                        templet: function (d) {
                            if (d.last_day < 0) {
                                return '<span class="label label-primary" style="background-color:#FF5722 !important;color:white;">过期' + Math.abs(d.last_day) + '天</span>';
                            } else {
                                return d.last_day;
                            }
                        }
                    }
                    , {
                        field: 'status', width: 140, title: '审核状态',
                        templet: function (d) {
                            if (d.status === '已审核') {
                                return '<span class="label label-primary" style="background-color:#1ab394 !important;color:white;">' + d.status + '</span>';
                            } else if (d.status === '待审核') {
                                return '<span class="label label-primary" style="background-color:#FFB800; !important;color:white;">' + d.status + '</span>';
                            } else {
                                return '<span class="label label-primary" style="background-color:#FF5722 !important;color:white;">' + d.status + '</span>';
                            }
                        }
                    }
                    , {fixed: 'right', 'title': '操作', align: 'center', width: 230, toolbar: '#barDemo'}
                ]
                ],
            });

            // 监听行工具栏事件
            table.on('tool(test)', function (obj) {
                var data = obj.data;   // 获取选中的数据
                var layEvent = obj.event;   // 获取 lay-event 对应的值
                var tr = obj.tr;    // 获取当前行 tr 的 DOM 对象

                if (layEvent === 'lookup') {
                    layer.open({
                        type: 2,
                        area: ['600px', '400px'],
                        maxmin: false,  // 禁止放大、全屏
                        fixed: false,
                        resize: false,  // 禁止拉伸
                        move: false,    // 禁止拖动
                        title: '当前线路',
                        content: ["{% url 'system:line-list' %}" + '?id=' + data['id'], 'no'],
                    });
                } else if (layEvent === 'edit') {

                } else if (layEvent === 'cancel') {
                    layer.confirm('确定撤销审核？', {
                        icon: 3,
                        title: '提示',
                    }, function (index) {
                        cancel_audit(data);
                    });
                }

            });


            // 撤销审核
            function cancel_audit(data) {
                var url = ["{% url 'system:account-cancel' %}" + '?id=' + data['id']];
                if (data['status'] === '已审核') {
                    layer.alert('已审核，不能再撤销', {icon: 5});
                    return false;
                }

                $.get(url, function (resp) {
                    if (resp['code'] === 0) {
                        layer.alert(resp['msg'], {icon: 1}, function (index) {
                            parent.layer.closeAll();
                        });
                        table.reload('Reload', 'data')
                    } else {
                        layer.alert(resp['msg'], {icon: 5});
                    }
                })
            }
        });

    </script>


{% endblock %}

